<template>
  <div class="body_">
    <!--    <el-tabs v-model="activeName" @tab-click="handleClick">-->
    <!--      <el-tab-pane label="数据统计" name="first">-->
    <div class="header">
      <div class="TitleForm">
        <el-form ref="TitleForm" :model="TitleForm" label-width="120px" inline>
          <el-form-item label="输入名称" prop="name">
            <el-input
              placeholder="请输入名称或编码"
              v-model="TitleForm.name"
            ></el-input>
          </el-form-item>
          <el-form-item label="状态" prop="state">
            <el-select v-model="TitleForm.state" placeholder="请选择信息">
              <el-option label="正常" value="1"></el-option>
              <el-option label="异常" value="2"></el-option>
            </el-select>
          </el-form-item>
        </el-form>
        <div class="queryBtn">
          <el-button @click="Select(true)" type="primary" icon="el-icon-search"
            >搜索</el-button
          >
          <el-button
            @click="resetSearchForm('TitleForm')"
            type="primary"
            icon="el-icon-refresh-left"
            >重置</el-button
          >
        </div>
      </div>
    </div>
    <div class="main">
      <div class="tableBtn">
        <el-button
          type="primary"
          icon="el-icon-plus"
          @click="AddDialogFormVisible = true"
          >新增</el-button
        >
      </div>
      <el-table
        :header-cell-style="{ 'text-align': 'center' }"
        :cell-style="{ 'text-align': 'center' }"
        :data="tableData"
        style="width: 100%"
      >
        <el-table-column
          prop="date"
          :index="indexAdd"
          type="index"
          label="序号"
          width="50"
        >
        </el-table-column>
        <el-table-column prop="name" label="灯杆名称"> </el-table-column>
        <el-table-column prop="state" label="灯杆状态"> </el-table-column>
        <!--        <el-table-column prop="id" label="灯杆编号"> </el-table-column>-->
        <el-table-column prop="latLng" label="灯杆坐标"> </el-table-column>
        <el-table-column prop="address" label="操作">
          <template slot-scope="scope">
            <span @click="EditDevice(scope.row)" class="operter">编辑</span>
            <span @click="DeleteDevice(scope.row)" class="operter">删除</span>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页器 -->
      <div class="block" style="margin-top: 15px">
        <el-pagination
          align="center"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[1, 5, 10, 20]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="tableData.length"
        >
        </el-pagination>
      </div>
    </div>
    <div class="Dialog_">
      <el-dialog
        width="30%"
        title="选择地图位置"
        :visible.sync="MapDialog"
        append-to-body
      >
        <Map @LatLng="LatLng" :initGetLatAndLng_="true" />
      </el-dialog>
      <el-dialog
        :title="DialogTitle"
        :visible.sync="AddDialogFormVisible"
        center
        width="30%"
        @close="CloseAddDialog"
      >
        <el-form ref="AddForm" :model="AddForm" :rules="rules">
          <el-form-item label="灯杆名称" label-width="120px" prop="name">
            <el-input v-model="AddForm.name" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="灯杆位置" label-width="120px" prop="address">
            <el-input v-model="AddForm.address" autocomplete="off"></el-input>
            <el-button class="SelectL" type="primary" @click="MapDialog = true"
              >选择位置</el-button
            >
          </el-form-item>
          <el-form-item label="状态" label-width="120px" prop="state">
            <el-select v-model="AddForm.state">
              <el-option label="启用" value="1"></el-option>
              <el-option label="未启用" value="2"></el-option>
            </el-select>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="AddDialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="AddDevice">确 定</el-button>
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import permission from "@/directive/permission/index.js";
import Map from "@/components/Map.vue";
import {
  AddDeviceLamp,
  DeleteDeviceLamp,
  EditDeviceLamp,
  GetDeviceLampList,
} from "@/api/SmartPoles";
export default {
  directives: { permission },
  mounted() {
    this.Select();
  },
  components: {
    Map,
  },
  data() {
    return {
      EditQuery: {},
      activeName: "first",
      DialogTitle: "新增智慧灯杆",
      isAdd: true,
      AddForm: {
        name: "",
        address: "",
      },
      MapDialog: false,
      tableData: [],
      currentPage: 1, // 当前页码
      total: 0, // 总条数
      pageSize: 10, // 每页的数据条数
      // 新增弹窗
      AddDialogFormVisible: false,
      TitleForm: {
        name: "",
        state: "",
        time: "",
      },
      rules: {
        name: [{ required: true, message: "请输入灯杆名称", trigger: "blur" }],
        address: [
          { required: true, message: "请选择灯杆位置", trigger: "blur" },
        ],
        state: [{ required: true, message: "请选择灯杆状态", trigger: "blur" }],
      },
    };
  },
  methods: {
    // 查询
    async Select(type) {
      if (type) {
        this.currentPage = 1;
      }
      let { data: res } = await GetDeviceLampList({
        page: this.currentPage,
        status: this.TitleForm.state,
        name: this.TitleForm.name,
      });
      this.tableData = [];
      this.total = Number(res.total);
      res.list.forEach((e) => {
        let item = {
          createtime: e.createtime,
          id: e.id,
          updatetime: e.updatetime,
          image: e.image,
          latitude: e.latitude,
          longitude: e.longitude,
          name: e.name,
          status: e.status,
          latLng: e.longitude + "," + e.latitude,
        };
        if (e.status === 1) {
          item.state = "正常";
        } else {
          item.state = "异常";
        }
        this.tableData.push(item);
      });
    },
    handleClick(tab, event) {
      console.log(tab, event);
    },
    handleSizeChange() {},
    handleCurrentChange() {},
    LatLng(latlng) {
      this.AddForm.address = latlng;
      this.MapDialog = false;
    },
    CloseAddDialog() {
      this.$refs["AddForm"].resetFields();
      this.DialogTitle = "新增智慧灯杆";
      this.isAdd = true;
      this.EditQuery = {};
    },
    // 新增
    AddDevice(param) {
      let that = this;
      this.$refs["AddForm"].validate((valid) => {
        if (valid) {
          let query = {
            name: this.AddForm.name,
            status: this.AddForm.state,
          };
          if (this.AddForm.address.indexOf(",") !== -1) {
            query.longitude = this.AddForm.address.split(",")[0];
            query.latitude = this.AddForm.address.split(",")[1];
          }
          if (this.isAdd) {
            //   新增
            AddDeviceLamp(query).then((res) => {
              if (res.code === 1) {
                this.$message("新增成功");
                this.Select(true);
                this.AddDialogFormVisible = false;
              }
            });
          } else {
            //
            query.id = this.EditQuery.id;
            EditDeviceLamp(query).then((res) => {
              if (res.code === 1) {
                this.$message("修改成功");
                this.Select(true);
                this.AddDialogFormVisible = false;
              }
            });
          }
        }
      });
    },
    //   编辑
    EditDevice(row) {
      this.isAdd = false;
      this.DialogTitle = "修改智慧灯杆";
      this.AddDialogFormVisible = true;
      this.$nextTick(() => {
        this.AddForm = {
          name: row.name,
          address: row.longitude + "," + row.latitude,
          state: String(row.status),
        };
      });

      let query = {
        name: this.AddForm.name,
        status: this.AddForm.state,
      };
      query.longitude = this.AddForm.address.split(",")[0];
      query.latitude = this.AddForm.address.split(",")[1];
      query.id = row.id;
      this.EditQuery = query;
    },
    //   删除
    DeleteDevice(row) {
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          DeleteDeviceLamp({ id: row.id }).then((res) => {
            if (res.code === 1) {
              this.$message({
                type: "success",
                message: "删除成功!",
              });
              this.Select(true);
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    // 重置表单
    resetSearchForm(formName) {
      this.$refs[formName].resetFields();
      this.Select(true);
    },
    // 序号递增
    indexAdd(index) {
      return index + this.pageSize * (this.currentPage - 1) + 1;
    },
  },
};
</script>

<style lang="scss" scoped>
#Map {
  width: 100%;
  height: 4rem /* 979/80 */;
  //position: absolute;
}
.body_ {
  overflow: hidden;
  padding-top: 0.2625rem;
  padding-left: 10px;
  padding-right: 10px;
  padding-bottom: 5px;
  display: flex;
  flex-direction: column;
  .header {
    width: 100%;
    //height: 0.85rem /* 68/80 */;
    border-radius: 4px;
    background-color: rgb(255, 255, 255);
    box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
  }
  .main {
    margin-top: 0.3rem /* 24/80 */;
    width: 100%;
    //height: 8.925rem /* 618/80 */;
    border-radius: 4px;
    background-color: rgb(255, 255, 255);
    box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
    flex: 1;
  }
}
.operter {
  color: rgba(59, 140, 255, 1) !important;
  cursor: pointer;
  margin-right: 4px;
}
</style>
